<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.com">
<head>
    <meta charset="UTF-8">
    <title>Settlement Record List Page</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" th:href="@{https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css}">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script type="text/javascript" th:src="@{https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js}"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script type="text/javascript" th:src="@{https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js}"></script>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<h1 style="text-align: center; background-color: #999999; border-bottom: #333333; margin-bottom: 100px">结算记录列表</h1>
<div class="container">
    <table class="table-list table table-hover table-condensed">
        <legend>
            <strong th:text="${username} + '的结算记录表：' " class="table-title">用户名的结算记录表</strong>
        </legend>
        <thead>
        <tr>
            <th>序号</th>
            <th>结算类型</th>
            <th>金额(单位：元)</th>
            <th>记录描述</th>
            <th>记录日期</th>
            <th>管理</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="sr, iter : ${srs}">
            <td th:text="${iter.count}">序号1</td>
            <td th:text="${sr.category}">开票/报销</td>
            <td th:text="${sr.number}">100</td>
            <td ><a th:text="${sr.description}" th:href="@{/update/{id}(id=${sr.id})}">嘉兴园区1.16-3.25结算</a></td>
            <td th:text="${sr.date}">2020.04.05</td>
            <td><a class="btn btn-success" th:href="@{/delete/{id}/{username}(id=${sr.id}, username=${sr.username})}">删除</a></td>
        </tr>
        </tbody>
    </table>

    <div class="opbt">
        <a class="btn btn-primary" href="/create" role="button">新增记录</a>
        <a class="btn btn-success" href="/statistic" role="button">统计报表</a>
    </div>
</div>

</body>
</html>